<template>
  <basic-layout :title="$t('menus.admin')">
    <div class="admin-view">
      <div class="admin-view_operation">
        <el-space :size="16" class="flex items-center px-0">
          <el-button
            :icon="CirclePlus"
            type="primary"
            @click="handleCommand('create')"
            >{{ $t('admin.operation.add_admin') }}</el-button
          >
          <el-button
            :icon="CirclePlus"
            type="primary"
            @click="handleCommand('create_dialog')"
            >{{ $t('admin.operation.add_admin') }}(dialog)</el-button
          >
          <el-form
            ref="queryForm"
            :model="formState"
            class="flex items-center gap-x-[24px]"
            inline
            @submit.prevent
          >
            <el-form-item prop="range" class="m-0">
              <el-date-picker
                v-model="formState.range"
                class="w-60"
                type="daterange"
                :start-placeholder="$t('common.global.start_date')"
                :end-placeholder="$t('common.global.end_date')"
              />
            </el-form-item>
            <el-form-item prop="keywords" class="m-0">
              <el-input
                v-model="formState.keywords"
                class="w-60"
                :placeholder="$t('user.operation.keyword')"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-space>
        <basic-refresh-button
          :loading="loading"
          @click="handleSearch"
        ></basic-refresh-button>
      </div>
      <div class="admin-view_content basic-table">
        <el-table
          v-loading="loading"
          class="basic-table"
          height="100%"
          :data="tableData"
        >
          <template #empty>
            <basic-empty></basic-empty>
          </template>
          <el-table-column type="index" label="#" width="80" />
          <el-table-column
            prop="id"
            :label="$t('admin.table.id')"
            min-width="175"
          >
            <template #default="{ row }">
              <el-link
                type="primary"
                :underline="false"
                class="font-normal"
                @click="handleCommand('detail')"
                >{{ row.id }}</el-link
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="account"
            show-overflow-tooltip
            :label="$t('admin.table.account')"
            min-width="175"
          />
          <el-table-column
            prop="role"
            show-overflow-tooltip
            :label="$t('admin.table.role')"
            min-width="175"
          />

          <el-table-column
            fixed="right"
            :label="$t('admin.table.action')"
            width="230"
          >
            <template #default="{ row }">
              <div class="flex items-center justify-around">
                <el-link
                  class="text-[14px] font-normal"
                  :underline="false"
                  type="primary"
                  @click="handleCommand('detail', row)"
                  >{{ $t('admin.table.detail') }}</el-link
                >
                <el-link
                  class="text-[14px] font-normal"
                  :underline="false"
                  type="primary"
                  @click="handleCommand('edit', row)"
                  >{{ $t('admin.table.edit') }}</el-link
                >
                <el-link
                  class="text-[14px] font-normal"
                  :underline="false"
                  type="primary"
                  @click="handleCommand('editor_dialog', row)"
                  >{{ $t('admin.table.edit') }}(dialog)</el-link
                >
                <el-link
                  class="text-[14px] font-normal"
                  :underline="false"
                  type="danger"
                  @click="handleCommand('delete', row)"
                  >{{ $t('admin.table.delete') }}</el-link
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <basic-pagination
        ref="paginationRef"
        v-model:offset="pagination.offset"
        v-model:page="pagination.page"
        v-model:limit="pagination.limit"
        :total="pagination.total"
        :disabled="loading"
        @change="getList"
      ></basic-pagination>
    </div>
  </basic-layout>
  <editor-dialog
    v-model:visible="editorState.visible"
    v-model:loading="editorState.loading"
    v-model:record="editorState.record"
    @reload="getList"
  ></editor-dialog>
</template>

<script setup lang="ts">
import { CirclePlus } from '@element-plus/icons-vue'
import { type FormInstance } from 'element-plus'
import { get, isFunction } from 'lodash-es'

import type { UserModel } from '@/apis/model/user'

import EditorDialog from './dialogs/EditorDialog.vue'
const { setMessageBox } = useMessageBox()
interface FormState {
  range?: [number, number]
  keywords: string
  offset: number
  limit: number
  total: number
}
const router = useRouter()
const formState = reactive<FormState>({
  range: undefined,
  keywords: '',
  offset: 0,
  limit: 20,
  total: 0
})

const editorState = reactive<CommonDialog<UserModel>>({
  visible: false,
  record: undefined,
  loading: false
})

const queryForm = ref<FormInstance>()
const paginationRef = ref()

const queryParams = ref({ sort: '', order: '', role: 2 })
const {
  data: tableData,
  loading,
  pagination,
  getList,
  handleSearch
} = useListRequest(userListApi, queryParams.value)

type ICommand =
  | 'detail'
  | 'edit'
  | 'delete'
  | 'create'
  | 'create_dialog'
  | 'editor_dialog'
const handleCommand = (command: ICommand, record?: UserModel) => {
  const actions: Record<ICommand, () => void> = {
    create: (): void => {
      router.push({ name: 'AdminEditorExample' })
    },
    edit: (): void => {
      router.push({
        name: 'AdminEditorExample',
        params: record?.id ? { id: record.id } : {}
      })
    },
    detail: (): void => {
      router.push({ name: 'AdminDetailExample', params: { id: record?.id } })
    },
    delete: (): void => {
      handleDelete(record)
    },
    create_dialog: (): void => {
      editorState.record = undefined
      editorState.visible = true
      editorState.loading = false
    },
    editor_dialog: (): void => {
      editorState.record = record
      editorState.visible = true
      editorState.loading = false
    }
  }
  if (isFunction(get(actions, command))) {
    actions[command]()
  }
}
const handleDelete = row => {
  // const { id, status } = row
  return new Promise((resolve, reject) => {
    setMessageBox({
      type: 'primary',
      content: useI18nContent('admin.dialog.del_content'),
      showWarningIcon: true,
      isScroll: true,
      cancel: reject,
      confirm: async () => {
        // await edit_user({ id, status: status === 1 ? 2 : 1 })
        // ToastUtils.success('操作成功')
        resolve(void 0)
        // getList()
      }
    })
  })
}
onMounted(getList)
</script>

<style lang="scss" scoped>
.admin-view {
  @apply w-full h-full bg-white p-6 rounded-lg flex flex-col;

  &_operation {
    @apply flex justify-between items-center mb-[16px] whitespace-nowrap;
  }

  &_content {
    @apply h-auto overflow-y-auto;
  }
}
</style>
